<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="Linpure">
    <META HTTP-EQUIV="pragma" CONTENT="no-cache"> 
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"> 
    <META HTTP-EQUIV="expires" CONTENT="0">
      
    <link rel="icon" href="./public/images/favicon.ico">

    <title>DrawGrid</title>

    <!-- Bootstrap core CSS -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel='stylesheet' href='./public/stylesheets/style_phone.css' />
    <script>
      document.write("<link rel='stylesheet' href='./public/stylesheets/style_phone.css?v= " + Math.random() + " '></>");
    </script>
    <!-- phone -->
  </head>

  <body>
    <div class="container-fluid">
      <div class="card-body">
        <h3 class="card-title">DrawGrid</h3>
        <p class="card-text">释放灵感，开始创作！</p>
        <blockquote class="blockquote">
          <footer class="blockquote-footer">designed by Linpure</footer>
        </blockquote>
      </div>
      <div class="row">
        <div class="topCon col-md-12">
          <div id="gridCon">
          </div>
        </div>
        <!-- Modal -->
        <div class="modal fade" id="tipModal" tabindex="-1" role="dialog" aria-labelledby="tipModalLabel">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="tipModalLabel">提示与教程</h4>
              </div>
              <div class="modal-body">
                <div class="alert alert-success">
                  <strong>第一步：</strong>首先选择图纸格数
                </div>
                <div class="alert alert-success">
                  <strong>第二步：</strong>点击右侧选择颜色
                </div>
                <div class="alert alert-success">
                  <strong>第三步：</strong>在左侧表格中开始你的创作
                </div>
                <div class="alert alert-info">
                  <strong>提示：</strong>重复点击可以回退
                </div>
                <div class="alert alert-info">
                  <strong>提示：</strong>点击右侧文件名称即可加载该作品
                </div>
                <div class="alert alert-danger">
                  <strong>警告：</strong>移动超出边框部分将会永久丢失
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">学会了</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row conBot">
        <div class="bottomCon col-md-6" id="leftCon">
          <div id="gridNumCon">
            <p class="text-primary text-center">点击按钮选择格数</p>
            <!-- Split button -->
            <div class="btn-group">
              <button type="button" class="btn btn-warning" id="showGridNum">32格 X 32格</button>
              <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
                aria-expanded="false">
                <span class="caret"></span>
              </button>
              <ul class="dropdown-menu">
                <li><a href="#" class="gridSelect" value=24>24格 X 24格</a></li>
                <li><a href="#" class="gridSelect" value=32>32格 X 32格</a></li>
                <li><a href="#" class="gridSelect" value=48>48格 X 48格</a></li>
              </ul>
            </div>
          </div>
          <div id="colorCon">
            <p class="text-primary text-center">点击按钮选择颜色</p>
            <input id="styleInput" disabled>
            <div class="input-group">
              <input type="text" class="form-control" placeholder="ff00ff" id="valueInput" value="ff6699">
              <span class="input-group-btn">
                <button class="btn btn-primary jscolor
                  {valueElement:'valueInput', styleElement:'styleInput'}" type="button"  data-toggle="tooltip" data-placement="top" title="选择颜色">选色</button>
              </span>
            </div><!-- /input-group -->
          </div>
          <div id="toolCon">
            <p class="text-primary text-center">工具区</p>
            <div class="btn-group btn-group-justified" role="group" aria-label="...">
              <div class="btn-group" role="group">          
                <!-- Button trigger modal -->            
                <button class="btn btn-success" type="button" id="tipBtn" data-toggle="modal" data-target="#tipModal">教程</button>
              </div>
              <div class="btn-group" role="group">              
                <button class="btn btn-primary" type="button" id="penBtn"  data-toggle="tooltip" data-placement="top" title="画笔功能">画笔</button>
              </div>
              <div class="btn-group" role="group">              
                <button class="btn btn-danger" type="button" id="cleanBtn"  data-toggle="tooltip" data-placement="top" title="清空屏幕">清空</button>
              </div>
            </div>
            <div class="btn-group btn-group-justified" role="group" aria-label="...">
              <div class="btn-group" role="group">              
                <button type="button" class="btn btn-default blockMove" value="left" data-toggle="tooltip" data-placement="top" title="整体左移">
                  <span class="glyphicon glyphicon-arrow-left"></span>
                </button>
              </div>
              <div class="btn-group" role="group">              
                <button type="button" class="btn btn-default blockMove" value="right" data-toggle="tooltip" data-placement="top" title="整体右移">
                  <span class="glyphicon glyphicon-arrow-right"></span>
                </button>
              </div>
              <div class="btn-group" role="group">              
                <button type="button" class="btn btn-default blockMove" value="up" data-toggle="tooltip" data-placement="top" title="整体上移">
                  <span class="glyphicon glyphicon-arrow-up"></span>
                </button>
              </div>
              <div class="btn-group" role="group">              
                <button type="button" class="btn btn-default blockMove" value="down" data-toggle="tooltip" data-placement="top" title="整体下移">
                  <span class="glyphicon glyphicon-arrow-down"></span>
                </button>
              </div>
            </div>
          </div>
        </div>
        <div class="bottomCon col-md-6" id="rightCon">
          <div id="fileCon">
            <p class="text-primary text-center">输入文件名点击保存</p>
            <div class="input-group">
              <input type="text" class="form-control" id="fileName" placeholder="文件名称">
              <span class="input-group-btn">
                <button class="btn btn-success" id="saveBtn" type="button"  data-toggle="tooltip" data-placement="top" title="保存文件">保存</button>
              </span>
            </div><!-- /input-group -->
          </div>
          <div id="fileListCon">
            <p class="text-primary text-center">已保存的文件名称</p>
            <div class="list-group" id="fileList">
            </div>
          </div>
        </div>
      </div>

    </div><!-- /.container -->

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.16.1/umd/popper.min.js"></script>    
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="./public/javascripts/jscolor.js"></script>
    <script src="./public/javascripts/main.js"></script>
    <script>isMobile()?'':window.location.href="./index.html";</script>
  </body>
</html>
